<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/home.css"/>
		<title>绑定邮箱</title>
		<style>
			.mui-table-view-cell{padding: 5px 15px;}
			.cs_menu_item{margin-bottom: 16px;}
			.cs_mg-top_10{margin-top: 10px;}
			.cs_menu_item input{width: 45vw;border: none;outline: none;margin-bottom: 0;}
			.cs_yan_box{background-color: #fb9323;position: absolute;right: 15px;line-height: 30px;margin-top: 5px;color: #fff;padding: 0 15px;border-radius: 15px;height: 30px;}
			.cs_disable{background-color: #9d9d9d !important;}
			.cs_bind{background-color: #fb9323;color: #fff;height: 44px;line-height: 44px;margin-bottom: 0;padding: 0;width: 83%;margin: 0 auto;}
			
		</style>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">绑定邮箱</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		
		<div class="mui-content cs_nobg cs_mg-top_10">
			<div class="cs_menu_item">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	请输入邮箱
				        <input id="email" type="text" />
				    </li>
				    <li class="mui-table-view-cell">
				        请输入邮箱验证码
				        <input type="text" name="" id="code" value="" />
				        <span class="cs_yan_box" onclick="get_code(this)">获取验证码</span>
				    </li>
				</ul>
			</div>
			
			<button class="mui-btn mui-btn-block cs_bind cs_disable">绑定</button>
			
			
			
			<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				
				function isEmail(str){ 
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 
				return reg.test(str); 
				}
				$("#email").on('keyup',function  () {
					console.log(isEmail($('#email').val()));
					if(isEmail($('#email').val())){
						$('.cs_bind').removeClass('cs_disable');
					}else{
						$('.cs_bind').addClass('cs_disable');
					}
				})
				
//				获取验证码
				function get_code (e) {
					var mailnum = $('#email').val();
					if(!isEmail(mailnum)){
						 return mui.toast('请输入正确邮箱账号');
					}
					
					$.ajax({
						url:'',
						data:{email:mailnum},
						dataType:'json',
						type:'post',
						success:function  (ret) {
							console.log()
						}
						
					})
					
				}	
				
				
				$('.cs_bind').on('tap',function  () {
					if($(this).hasClass('cs_disable')){
						
					}
				})
			</script>
	</body>
</html>
